<template>
  <div>
    <el-row>
  <div>
    <h2 style="float: left;">自定义奖惩内容</h2>
    <br/>
    <br/>
    <div style="margin: 10px 0">
      <el-button style="float: left;" type="primary" @click="handleAdd">新增<i class="el-icon-circle-plus-outline"></i></el-button>
    </div>
    <el-table :data="tableData" border stripe :header-cell-class-name="headerBg" @selection-change="handleSelectionChange">
      <el-table-column
              type="selection"
              width="55">
      </el-table-column>
      <el-table-column prop="id" label="id" width="80">
      </el-table-column>
      <el-table-column prop="content" label="内容">
      </el-table-column>
      <el-table-column prop="remarks" label="备注">
      </el-table-column>
      <el-table-column prop="userId" label="用户">
      </el-table-column>
      <el-table-column label="操作" width="230px">
        <template slot-scope="scope">
          <el-button type="warning" @click="handleEdit(scope.row)" v-if="!(scope.row.userId===0)">编辑</el-button>
          <span @click="delBtn">
                    <el-popconfirm
                            class="ml-5"
                            confirm-button-text='好的'
                            cancel-button-text='不用了'
                            icon="el-icon-info"
                            icon-color="red"
                            title="您确定删除吗？"
                            @confirm="del(scope.row.id)"
                    >
                        <el-button type="danger" slot="reference" v-if="!(scope.row.userId===0)" >删除</el-button>
                    </el-popconfirm>
                </span>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
    </div>

    <el-dialog title="修改信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form  :model="form" label-width="70px" size="small">
        <el-form-item label="内容" >
          <el-input v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" >
          <el-input v-model="form.remarks" autIocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户" >
          <el-input v-model="form.userId" autocomplete="off" disabled="disabled"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ZjhPagePunish",
  data(){
    return{
      tableData: [],
      total: 0,
      pageNum:1,
      pageSize:5,
      dialogFormVisible:false,
      form: {
        content:"",
        remarks:"",
        userId:"",
      },
      multipleSelection:[],
      headerBg:'headerBg',
      roles:[],
      user:Object

    }
  },
  created() {
    // 请求分页查询数据
    this.load()
  },
  methods:{
    tishi(){
      this.$message.error("默认数据修改请联系管理员！")
    },
    load(){
      let user = localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")) : "";

      this.request.get("/reward-punish/page",
              {
                params:{
                  pageNum:this.pageNum,
                  pageSize:this.pageSize,
                  userId:user.id

                }
              })
              .then(res =>{
                this.tableData = res.data.records;
                this.total = res.data.total
              })
      this.form.userId = user.id

      // fetch("http://localhost:9911/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize +"&username="+this.username)
      //         .then(res => res.json()).then(res => {
      //   console.log(res)
      //   this.tableData = res.data
      //   this.total = res.total
      // })
    },

    // 增
    save(){
      this.request.post("/reward-punish",this.form).then(res=>{
        if (res.code==="200"){
          this.$message.success("保存成功！")
          this.dialogFormVisible=false
          this.load()
        }
        else
          this.$message.error("保存失败！")
      })
    },

    handleAdd(){
      this.dialogFormVisible=true
      this.form.content="",
      this.form.remarks=""
    },
    // 改
    handleEdit(row){
      this.form = Object.assign({},row)
      this.dialogFormVisible=true
    },
    // 删
    del(id){
      this.request.delete("/reward-punish/"+id).then(res=>{
        if (res.code==="200"){
          this.$message.success("删除成功！")
          this.load()
        }
        else
          this.$message.error("删除失败！")
      })
    },
    handleSelectionChange(val){
      this.multipleSelection=val
    },
    delBatch(){
      let ids = this.multipleSelection.map(v=> v.id)// [{},{},{}] => [1,2,3]
      this.request.post("/reward-punish/del/batch",ids).then(res=>{
        if (res.code==="200"){
          this.$message.success("删除成功！")
          this.load()
        }
        else
          this.$message.error("删除失败！")
      })
    },

    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum){
      this.pageNum = pageNum
      this.load()
    },
    // exp(){
    //   window.open("http://localhost:9911/user/export")
    // },
    delBtn(e){
      e.stopPropagation();
    }
  }
}
</script>

<style scoped>

</style>